<!DOCTYPE html>
<html lang="zh-cn">

<head>
<meta charset="utf-8" />
<meta name="author" content="TianShangXing" />
<meta name="description" content="Personal blog." />
<meta name="keywords" content="blog, tech" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="generator" content="Hugo 0.68.3" />

<link rel="canonical" href="https://tianshangxing.gitee.io/myblog/blog/vue.js%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95/">
<meta property="og:title" content="Vue.js常用语法" />
<meta property="og:description" content="Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
 文本插值 数据绑定最常见的形式就是使用 {{&hellip;}}（双大括号）的文本插值：
&lt;div&gt; &lt;p&gt;{{ msg }}&lt;/p&gt; &lt;/div&gt; Html 使用 v-html 指令用于输出 html 代码：
&lt;!-- 解析html语法 --&gt; &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt; &lt;script&gt; export default { data() { return { msg: &#39;&lt;h1&gt;变量&lt;/h1&gt;&#39;, } } } &lt;/script&gt; v-show 我们也可以使用 v-show 指令来根据条件展示元素：
&lt;div&gt; &lt;h3 v-show=&quot;ok&quot;&gt;Hello World&lt;/h3&gt; &lt;/div&gt; &lt;script&gt; export default { data() { return { ok: 1, // 0:false 1:true, } } } &lt;/script&gt; 缩写 Vue." />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://tianshangxing.gitee.io/myblog/blog/vue.js%E5%B8%B8%E7%94%A8%E8%AF%AD%E6%B3%95/" />
<meta property="article:published_time" content="2020-04-22T17:10:41+08:00" />
<meta property="article:modified_time" content="2020-04-22T17:10:41+08:00" />

<meta name="twitter:card" content="summary"/>
<meta name="twitter:title" content="Vue.js常用语法"/>
<meta name="twitter:description" content="Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
 文本插值 数据绑定最常见的形式就是使用 {{&hellip;}}（双大括号）的文本插值：
&lt;div&gt; &lt;p&gt;{{ msg }}&lt;/p&gt; &lt;/div&gt; Html 使用 v-html 指令用于输出 html 代码：
&lt;!-- 解析html语法 --&gt; &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt; &lt;script&gt; export default { data() { return { msg: &#39;&lt;h1&gt;变量&lt;/h1&gt;&#39;, } } } &lt;/script&gt; v-show 我们也可以使用 v-show 指令来根据条件展示元素：
&lt;div&gt; &lt;h3 v-show=&quot;ok&quot;&gt;Hello World&lt;/h3&gt; &lt;/div&gt; &lt;script&gt; export default { data() { return { ok: 1, // 0:false 1:true, } } } &lt;/script&gt; 缩写 Vue."/>


<meta itemprop="name" content="Vue.js常用语法">
<meta itemprop="description" content="Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。
Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。
 文本插值 数据绑定最常见的形式就是使用 {{&hellip;}}（双大括号）的文本插值：
&lt;div&gt; &lt;p&gt;{{ msg }}&lt;/p&gt; &lt;/div&gt; Html 使用 v-html 指令用于输出 html 代码：
&lt;!-- 解析html语法 --&gt; &lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt; &lt;script&gt; export default { data() { return { msg: &#39;&lt;h1&gt;变量&lt;/h1&gt;&#39;, } } } &lt;/script&gt; v-show 我们也可以使用 v-show 指令来根据条件展示元素：
&lt;div&gt; &lt;h3 v-show=&quot;ok&quot;&gt;Hello World&lt;/h3&gt; &lt;/div&gt; &lt;script&gt; export default { data() { return { ok: 1, // 0:false 1:true, } } } &lt;/script&gt; 缩写 Vue.">
<meta itemprop="datePublished" content="2020-04-22T17:10:41&#43;08:00" />
<meta itemprop="dateModified" content="2020-04-22T17:10:41&#43;08:00" />
<meta itemprop="wordCount" content="234">



<meta itemprop="keywords" content="" />

<link rel="stylesheet" href="https://tianshangxing.gitee.io/myblog/css/layout.css" />


<link rel="stylesheet" href="https://tianshangxing.gitee.io/myblog/css/default-dark.css" />




<title>


     Vue.js常用语法 

</title>

</head>


<body>
<div class="main">
<header>

<div class="header-bar">

  <nav>
    <div class="siteTitle">
      <a href="https://tianshangxing.gitee.io/myblog">TianShangXing&#39;s Blog</a>
    </div> 

    
    
    <a class="nav-item" href="https://tianshangxing.gitee.io/myblog/blog/"><div class="nav-item-title">Blogs</div></a>
    
    <a class="nav-item" href="https://tianshangxing.gitee.io/myblog/resume/"><div class="nav-item-title">Resume</div></a>
    

  </nav>

  
<div class="social-links-header">

  
  <a href="mailto:tian_shang_xing@foxmail.com"><div class="social-link">email</div></a>
  

  
  <a href="https://github.com/TianShangXing" target="_blank"><div class="social-link">gh</div></a>
  

  

  

  
  <a href="https://www.linkedin.com/in/%e6%98%9f%e4%bc%b8-%e5%88%98-b7b7321a6" target="_blank"><div class="social-link">in</div></a>
  

</div>


</div>


</header>


<article class="post">
    <h1 class="title"> Vue.js常用语法 </h1>
    <div class="content"> <h2 id="vuejs-模板语法">Vue.js 模板语法</h2>
<p>Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。</p>
<p>Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。</p>
<p>结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。</p>
<hr>
<h3 id="文本插值">文本插值</h3>
<p>数据绑定最常见的形式就是使用 {{&hellip;}}（双大括号）的文本插值：</p>
<pre><code>&lt;div&gt;
  &lt;p&gt;{{ msg }}&lt;/p&gt;
&lt;/div&gt;
</code></pre><h3 id="html">Html</h3>
<p>使用 v-html 指令用于输出 html 代码：</p>
<pre><code>&lt;!-- 解析html语法 --&gt;
&lt;div v-html=&quot;msg&quot;&gt;&lt;/div&gt;

&lt;script&gt;
export default {
    data() {
        return {
            msg: '&lt;h1&gt;变量&lt;/h1&gt;',
        }
    }
}
&lt;/script&gt;
</code></pre><h3 id="v-show">v-show</h3>
<p>我们也可以使用 v-show 指令来根据条件展示元素：</p>
<pre><code>&lt;div&gt;
&lt;h3 v-show=&quot;ok&quot;&gt;Hello World&lt;/h3&gt;
&lt;/div&gt;

&lt;script&gt;
export default {
    data() {
        return {
            ok: 1, // 0:false  1:true,
        }
    }
}
&lt;/script&gt;
</code></pre><h3 id="缩写">缩写</h3>
<p>Vue.js 为两个最为常用的指令提供了特别的缩写：</p>
<p>v-bind 缩写</p>
<pre><code>&lt;!-- 完整语法 --&gt;
&lt;a v-bind:href=&quot;url&quot;&gt;&lt;/a&gt;
&lt;!-- 缩写 --&gt;
&lt;a :href=&quot;url&quot;&gt;&lt;/a&gt;
</code></pre><p>v-on 缩写</p>
<pre><code>&lt;!-- 完整语法 --&gt;
&lt;a v-on:click=&quot;doSomething&quot;&gt;&lt;/a&gt;
&lt;!-- 缩写 --&gt;
&lt;a @click=&quot;doSomething&quot;&gt;&lt;/a&gt;
</code></pre><h3 id="条件判断-v-if-v-else-if-v-else">条件判断 v-if v-else-if v-else</h3>
<pre><code>&lt;div v-if=&quot;type === 'A'&quot;&gt;A&lt;/div&gt;
&lt;div v-else-if=&quot;type === 'B'&quot;&gt;B&lt;/div&gt;
&lt;div v-else&gt;啥也不是&lt;/div&gt;

&lt;script&gt;
export default {
    data() {
        return {
            type: 'A',
        }
    }
}
&lt;/script&gt;
</code></pre><h3 id="循环语句-v-for">循环语句 v-for</h3>
<pre><code>&lt;ul&gt;
    &lt;!--  --&gt;
    &lt;li v-for=&quot;(item, index) in tlist&quot; :key=&quot;index&quot; :class=&quot;{on:index%2==0, off:index%2!==0}&quot;&gt;
        {{ item.text }}
    &lt;/li&gt;
&lt;/ul&gt;

&lt;script&gt;
export default {
    data() {
        return {
            tlist: [{text: '家电'}, {text: '生鲜'}, {text: '果蔬'}],
        }
    }
}
&lt;/script&gt;

&lt;style&gt;
    .on {background: rebeccapurple; color: white;}
    .off {background: red; color: black;}
&lt;/style&gt;
</code></pre><h3 id="监听属性-watch">监听属性 watch</h3>
<pre><code>&lt;button @click='counter++'&gt;点我加1&lt;/button&gt;

&lt;script&gt;
export default {
    // 监听属性
    watch: {
        counter: function (nval, oval) {
            console.log('计数器由' + oval + '变成了' + nval)
        }
    },
}
&lt;/script&gt;
</code></pre><h3 id="计算属性-computed">计算属性 computed</h3>
<pre><code>&lt;div&gt;{{ reverse_msg }}&lt;/div&gt;

&lt;script&gt;
export default {
    // 计算属性
    computed: {
        // 反转
        reverse_msg: function (){
            return this.msg.split('').reverse().join('');
        }
    },
}
&lt;/script&gt;
</code></pre> </div>
    <footer class="post-footer">

  <div class="post-footer-data">
            
<div class="tags">
  
</div>

    <div class="date"> 2020-04-22 </div>
    
  </div>
</footer>



</article>

  <footer>

  <div class="social-links-footer">

  
  <a href="mailto:tian_shang_xing@foxmail.com"><div class="social-link">Email</div></a>
  

  
  <a href="https://github.com/TianShangXing" target="_blank"><div class="social-link">GitHub</div></a>
  

  

  

  
  <a href="https://www.linkedin.com/in/%e6%98%9f%e4%bc%b8-%e5%88%98-b7b7321a6" target="_blank"><div class="social-link">LinkedIn</div></a>
  

  <div class="social-link">
  <a href="https://tianshangxing.gitee.io/myblog/index.xml" target="_blank">RSS</a>
  </div>

</div>


  <div class="copyright"> Copyright (c) 2020, all rights reserved. </div>

  <div class="poweredby">
    Powered by <a href="https://gohugo.io/">Hugo</a>.
  </div>

  </footer>

</div> 

</body>
</html>

